<!DOCTYPE html>
<!--
 Copyright 2024 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<html>
  <head>
    <script src="./config.js"></script>
    <script src="./bundle.js"></script>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <h1>Genkit authentication demo</h1>
    <p id="emulator-warning">Using emulators</p>
    <p>
      The <span class="code bold">jokeFlow</span> CF3 flow linked in this demo
      requires Firebase Auth to be called correctly. Specifically, to execute
      the flow, you must be logged in with Firebase Auth, and your email account
      must be verified.
    </p>
    <p>
      Use this page to test three states: unauthenticated, logged in without
      verification, logged in with verification (via Google sign-in which
      auto-verifies). Try running the flow in each state.
    </p>
    <div class="flow">
      <input id="subject" placeholder="subject" />
      <button onclick="runflow()">Tell joke</button>
      <p>
        <span class="bold">Response:&nbsp;</span
        ><span id="response"></span>&nbsp;<span id="response-code"></span>
      </p>
    </div>
    <div class="auth">
      <p>
        <span id="login">
          <button onclick="anonymous()">
            Sign in anonymously (no email verification)
          </button>
          <button onclick="google()">
            Sign in with Google (email verification)
          </button>
        </span>
        <button id="logout" onclick="logout()">Sign out</button>
      </p>
      <p class="bold">Token:</p>
      <pre id="token-blob">Signed out</pre>
    </div>
    <div>
      <button onclick="emulate()" id="emulator-button">Use emulator</button>
    </div>
  </body>
</html>
